<config>
{
    "title": "javascript模拟滚动条"
}
</config>

<style>
body{ background-color: #333;}
#box{ position: relative; overflow: hidden; width: 960px; height: 500px; margin: 50px auto 0; background-color: #fff;}
#left{ position: absolute; float: left; width: 930px; padding: 0 5px;}
#right{ position: relative; float: right; width: 20px; height: 100%; background-color: #f1f1f1;}
#bar{ position: absolute; width: 18px; height: 80px; border: 1px solid #ccc; background-color: #eee;}
h2{ text-align: center; font: 24px/2 "Microsoft Yahei";}
p{ text-indent: 2em; margin-top: 5px; font: 14px/1.5 "Microsoft Yahei";}
</style>

<div id="box">
	<div id="left">
		<h2>武磊头球锁胜局 国足半场惊魂1-0险胜印尼</h2>
		<p>10月15日的小组第3轮赛事中，国足客场1-1战平印尼，3轮过后国足1胜1平1负积4分形势并不理想——沙特3战全胜积9分，伊拉克1胜2负积3分；国足此战必须赢球才能掌控争夺两个出线名额的主动权。刚刚获得亚冠冠军的恒大[微博]此战有7位国脚先发，郑智、张琳芃[微博]组合中后卫，郜林与武磊、孙可[微博]搭档前卫线，于大宝突前。</p>
		　　<p>开场后印尼快速冲击连续在前场右侧赢得界外球，第2分钟，印尼队挑传打到中国队防线身后，吉普乌前冲扫传门前时被曾诚将球没收。面对印尼开局阶段的积极逼抢，中国队在第5分钟形成首次威胁攻势，于大宝直塞助郜林单刀球插上，但印尼门将维拉万快速出击将球封出[点击观看视频]。1分钟后赵旭日[微博]分球至左侧，武磊调整攻门被印尼防线挡出底线。中国队形成连续角球冲击，印尼队也在寻找快速反击的机会，陶菲克下底传中给中国队球门施加了一定压力。</p>
		　　<p>第11分钟，中国队前场右侧界外球掷入，孙可插入禁区于底线前传中，维拉万倒地连续扑救将球没收。1分钟后印尼队中路快速配合，布斯托米远射打偏。中国队此后数次形成直线打对手防线身后，维拉万连续出击封锁了传球路线。第19分钟，荣昊右侧角球传中引发印尼禁区混乱，郜林禁区线前倒钩攻门打高。1分钟后武磊右侧传中，于大宝头球争顶未构成威胁。</p>
		　　<p>第21分钟，武磊前场逼抢造成伊格邦内佛被迫回传，维拉万在于大宝压迫下将球停出了底线，中国队连续角球虽未形成攻门，但对印尼形成了持续的半场压制[点击观看视频]。第26分钟，孙可、郜林左路冲击赢得角球，此后赵旭日又赢得前场右侧任意球，印尼队密集中路的防守策略连续形成破坏。第28分钟，赵旭日再次为中国队赢得前场右侧任意球，荣昊高球传入禁区，张琳芃在维拉万出击同时争高点头球顶偏。1分钟后刘建业右路送出传中，郜林禁区中路头球攻门角度过正，维拉万侧扑将球没收。这是中国队首次形成有效的运动战边中配合[点击观看视频]。</p>
		　　<p>第31分钟，于大宝策动中国队左路快速进攻，武磊中路前插低射打偏。第34分钟，孙可赢得左侧任意球，印尼故意阻挡中国队快速开球，陶菲克领到黄牌。此后双方形成持续胶着，中国队上半场的控球比率达到75%，但印尼防守中的快速拼抢屡屡形成抢断。第42分钟，印尼吉普乌手球犯规领到黄牌，中国队任意球开出后，孙可冲入禁区瞬间疑似被对手推倒，来自澳大利亚的主裁判皮特-格林没有理会[点击观看视频]。上半场进入补时阶段，中国队两边路持续冲击终取得入球——刘建业右路起球传中，孙可前点吸引了印尼防守主将伊格邦内佛，武磊小禁区线前甩头攻门命中，中国队1-0领先结束上半场[点击观看进球视频]。</p>
		　　<p>下半场刚刚开场武磊与刘建业又形成边中联线，武磊禁区中路头球攻门顶偏。第48分钟，郜林与武磊形成中路两点前插，但郜林低传门前时被维拉万抢先将球没收。比分落后的印尼阵型被迫拉开，中后场空档已较上半场明显增多，面对中国队的渗透配合犯规也告增多；第50分钟，赵旭日中路拿球被对手侵犯，赵旭日一时非常痛苦。此后郜林也被对手放倒。第55分钟，印尼队后场任意球快速开出，萨纳迪外围攻门被封堵，麦蒂默再射打偏。</p>
		　　<p>印尼队连续换将祭出了4-3-3阵型，试图加强快速冲击。第60分钟，印尼队右侧角球传至禁区后点，伊格邦内佛头球攻门直入曾诚怀中。中国队坚持平稳控球，与对手形成持续相持。中国队在第65分钟进行调整，张稀哲[微博]换下于大宝。第69分钟，郜林为中国队赢得中路任意球，郜林直接远射打出了质量颇高的落叶球，可惜稍稍偏出。1分钟后印尼后场抢断武磊后迅速长传策动快攻，博奈右翼突入禁区低射打偏[点击观看视频]。</p>
		　　<p>印尼队前场逼抢、渗透连起冲击，第73分钟，博奈再次突入禁区，荣昊作出关键拦截。1分钟后中国队前场任意球开出，荣昊外围远射打高。第75分钟，博奈禁区前弧线球攻门打偏。下半场中段来，中国队中场控制力明显下降，已是被对手控制了主动权。印尼队再做调整，用锋将阿里夫换下了后卫尤弗里扬托。第77分钟，印尼队右路渗透又打入中国队禁区，索罗萨攻门失误将球打偏。</p>
		　　<p>第78分钟，张稀哲中场长传策动威胁快攻，武磊切入禁区后摆脱防守，但小角度面对门将攻门打偏[点击观看视频]。片刻后郜林左侧突破扫传门前将球打偏。中国队冲击势头突起，第80分钟，张稀哲中路直塞策动攻势，武磊与伊格邦内佛贴身竞速中相继倒地，孙可右侧底线前传中，郜林禁区中路攻门被封堵，刘建业外围再射打高。中国队再做调整，用刘健换下了赵旭日。随着张稀哲的外脚背精彩传球，中国队中前场连起快速冲击，第85分钟，刘建业突入禁区与出击的维拉万接触摔倒，裁判犹豫中没有判罚[点击观看视频]。</p>
		　　<p>面对萨纳迪的快速突破，郑智防守中撞人犯规领到黄牌。第87分钟，中国队再用曲波[微博]换下孙可。第88分钟，印尼角球冲击后祖拉右路传中，曾诚出击击球不远，禁区右侧的索罗萨凌空抽射被武磊用胸膛挡出。第90分钟，张稀哲左路传中碰罗比折线打在边网上。进入补时阶段，张稀哲任意球准确长传，刘健头球攻门被维拉万侧扑挡到，皮球击中立柱[点击观看视频]！3分钟补时过后，国足最终1-0击败印尼。【买亚预赛彩票力挺国足！[投注:PK沙特下周开盘 世预赛激战][现在充20送10元]】</p>
		　　<p>中国队出场阵容：1-曾诚；4-荣昊、5-张琳芃、10-郑智、13-刘建业；7-赵旭日(82分钟，17-刘健)、16-黄博文；18-郜林、20-武磊、14-孙可(87分钟，11-曲波)；22-于大宝(66分钟，21-张稀哲)</p>
		　　<p>印尼队出场阵容：12-维拉万、13-尤弗里扬托(77分钟，9-阿里夫)、4-伊格邦内佛、8-麦蒂默、16-罗比；7-索罗萨、14-萨纳迪、15-吉普乌(46分钟，3-帕埃乌)、19-布斯托米(58分钟，17-祖拉)、25-博奈；11-陶菲克</p>
	</div>
	<div id="right">
		<div id="bar"></div>
	</div>
</div>


<script>
function addEvent(ele, type, fn) {
	if (ele.addEventListener) {
		ele.addEventListener(type, fn, false);
	} else {
		ele.attachEvent('on' + type, fn);
	}
}

function addWheelEvent(ele, fn) {
	var isFirefox = (window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
	var down = true;	// 标识滚轮方向

	// 滚动执行的函数
	var wheelFn = function (ev) {
		var oEvent = ev || event;
		/*if (oEvent.wheelDelta) {
			down = oEvent.wheelDelta < 0;
		} else {
			down = oEvent.detail > 0;
		}*/
		// 简写
		down = oEvent.wheelDelta ? oEvent.wheelDelta < 0 : oEvent.detail > 0;
		fn && fn(down);

		// 阻止默认事件
		oEvent.preventDefault && oEvent.preventDefault();
		return false;
	};
	if (isFirefox) {
		ele.addEventListener('DOMMouseScroll', wheelFn, false);
	} else {
		addEvent(ele, 'mousewheel', wheelFn);
	}
}

window.onload = function () {
	var box = document.getElementById('box');
	var left = document.getElementById('left');
	var right = document.getElementById('right');
	var bar = document.getElementById('bar');
	var t = 0;	// 滚动条的位置

	// 根据内容计算滚动条高度
	bar.style.height = box.offsetHeight / left.offsetHeight * right.offsetHeight + 'px';

	addWheelEvent(document, function (down) {
		if (down) {
			t += 20;
		} else {
			t -= 20;
		}
		scroll(t);
	});

	// 滚动计算
	function scroll() {
		t < 0 && (t = 0);
		t > right.offsetHeight - bar.offsetHeight && (t = right.offsetHeight - bar.offsetHeight);
		bar.style.top = t + 'px';
		var scale = bar.offsetTop / (right.offsetHeight - bar.offsetHeight);
		left.style.top = -(left.offsetHeight - box.offsetHeight) * scale + 'px';
	}

	// 拖拽滚动条
	bar.onmousedown = function (ev) {
		var oEvent = ev || event;
		var isIE = !!window.ActiveXObject;
		disY = oEvent.clientY - bar.offsetTop;

		document.onmousemove = function (ev) {
			var oEvent = ev || event;
			t = oEvent.clientY - disY;
			scroll();
		};

		document.onmouseup = function () {
			document.onmousemove = null;
			document.onmouseup = null;
			isIE && bar.releaseCapture();
		};
		isIE && bar.setCapture();
		return false;
	}
}
</script>